<template>
  <el-drawer
    v-model="visible"
    title="查看商品详情"
    direction="rtl"
    :before-close="handleClose"
    :size="400"
    destroy-on-close
  >
    <template v-if="detail">
      <img width="200" :src="detail.img1" />
      <h3>{{ detail.proname }}</h3>
      <p>{{ detail.desc }}</p>
    </template>
  </el-drawer>
</template>
<script>
import { getProItemDetailApi } from '@/api/pro'
export default {
  name: 'GoodProDetail',
  props: ['visible', 'proid'],
  emits: ['update:visible'],
  data () {
    return {
      detail: null
    }
  },
  created () {
    this.$watch(() => ([this.visible, this.proid]), () => {
      if (this.visible && this.proid) {
        this.getProDetail()
      }
    })
  },
  methods: {
    handleClose (done) {
      this.$emit('update:visible', false)
      done()
    },
    async getProDetail () {
      try {
        const data = await getProItemDetailApi(this.proid)
        this.detail = data[0]
      } catch (error) {}
    }
  }
}
</script>